<template>
  <div>
    <div id="nav">
      <div class="nav_top">
        <p>查询</p>
      </div>
      <div class="nav_mid">
        <el-form :inline="true"
                 :model="formInline"
                 class="demo-form-inline">
          <el-form-item label="搜索：">
            <el-input v-model="formInline.customer_name"
                      placeholder="请输入用户名称"
                      class="input_1"></el-input>
            <el-input v-model="formInline.order_num"
                      placeholder="请输入订单编号"
                      class="input_2"></el-input>
          </el-form-item>
          <div>
            <el-form-item label="筛选：">
              <el-date-picker v-model="formInline.order_time"
                              type="datetimerange"
                              align="right"
                              unlink-panels
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              :picker-options="pickerOptions"
                              format="yyyy 年 MM 月 dd 日 hh 时 mm 分 ss 秒"
                              value-format="yyyy-MM-dd hh:mm:ss">
              </el-date-picker>
              <el-select v-model="formInline.order_state"
                         placeholder="已付款">
                <el-option label="已付款"
                           value="已付款"></el-option>
                <el-option label="未付款"
                           value="未付款"></el-option>
                <el-option label="已退款"
                           value="已退款"></el-option>
              </el-select>
              <el-select v-model="formInline.order_type"
                         placeholder="根据订单类型进行筛选">
                <el-option label="门店订单"
                           value="门店订单"></el-option>
                <el-option label="小程序订单"
                           value="小程序订单"></el-option>
                <el-option label="预约单"
                           value="预约单"></el-option>
                <el-option label="取号单"
                           value="取号单"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         round
                         class="search"
                         @click="onSearch">查询</el-button>
              <el-button type="primary"
                         round
                         class="search"
                         @click="onReset">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="nav_bottom clear">
      <p class="ziti">明细数据</p>
      <el-button type="info"
                 round
                 class="export"
                 @click="onExport">
        导出
      </el-button>
    </div>
    <el-table :data="tableData"
              stripe
              style="width: 100%"
              :cell-style="{border:'1px solid #DCDCDC'}"
              :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}">
      <el-table-column prop="order_num"
                       label="订单编号"
                       width="120"
                       align='center'></el-table-column>
      <el-table-column width="130"
                       prop="order_type"
                       label="订单类型"
                       align='center'></el-table-column>
      <el-table-column width="130"
                       prop="order_name"
                       label="菜品名称"
                       align='center'></el-table-column>
      <el-table-column width="200"
                       prop="order_time"
                       label="下单时间"
                       align='center'></el-table-column>
      <el-table-column width="140"
                       prop="order_allprice"
                       label="订单总价"
                       align='center'></el-table-column>
      <el-table-column width="140"
                       prop="customer_name"
                       label="用户名"
                       align='center'></el-table-column>
      <el-table-column width="140"
                       prop="pay_way"
                       label="支付方式"
                       align='center'></el-table-column>
      <el-table-column width="140"
                       prop="order_state"
                       label="状态"
                       align='center'></el-table-column>
      <el-table-column label="操作"
                       width="130"
                       align='center'>
        <template slot-scope="scope">
          <el-button type="text"
                     @click="onLook(scope.row.order_id,scope.row.customer_id)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handlePageChange"
                     :page-sizes="[5,10,15,20,25,30]"
                     :page-size="count"
                     layout="total,sizes,prev, pager, next, jumper"
                     :total="totalData.length">
      </el-pagination>
    </div>

  </div>

</template>
<script>
export default {
  data () {
    return {
      formInline: {
        customer_name: '',
        order_num: '',
        order_time: [],
        order_state: '',
        order_type: '',
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      totalData: [],
      page: 1,
      count: 5,
    };
  },
  methods: {
    getuser: function () {
      this.$axios({
        url: '/api/indent/getindent'
      }).then((res) => {
        this.totalData = res.data.data
      })
    },
    onSearch: function () {
      if (!this.formInline.order_time.length) {
        this.formInline.order_time = ['', '']
      }
      this.$axios({
        url: '/api/indent/getindentid',
        params: this.formInline,
      }).then((res) => {
        this.totalData = res.data.data
        this.page = 1
      })
    },
    onReset () {
      this.formInline = {
        customer_name: '',
        order_num: '',
        order_time: [],
        order_state: '',
        order_type: '',
      }
      this.getuser();
    },

    // 每页多少条数据
    handleSizeChange (count) {
      this.count = count
    },
    // 分页
    handlePageChange (page) {
      this.page = page
    },
    onExport () {
      this.$alert('是否确认导出明细？', {
        title: '导出明细',
        callback: (action) => {
          if (action == 'confirm') {
            let datalist = [];
            datalist.push([
              "订单编号",
              "订单类型",
              "菜品名称",
              "下单时间",
              "订单总价",
              "用户名",
              "支付方式",
              "状态"
            ]);
            this.tableData.forEach(item => {
              datalist.push([
                item.order_num,
                item.order_type,
                item.order_name,
                item.order_time,
                item.order_allprice,
                item.customer_name,
                item.pay_way,
                item.order_state,
              ]);
            });
            this.$downloadXlsx(datalist, "订单信息明细数据.xlsx");
            this.$message({
              type: 'success',
              message: '导出成功!'
            });
          } else {
            this.$message({
              type: 'cancel',
              message: '已取消导出。'
            });
          }
        }
      });
    },
    onLook (v, j) {
      this.$router.push({
        name: "inventory",
        params: { id: v, cusid: j },
      })
    },
  },
  created: function () {
    this.getuser();
  },
  computed: {
    tableData: function () {
      return this.totalData.slice((this.page - 1) * this.count, this.page * this.count);
    }
  },
}

</script>
<style scoped>
.clear::after {
  content: "";
  display: block;
  clear: both;
}
#nav {
  border: 1px solid rgba(242, 242, 242);
}
.nav_top {
  height: 50px;
  background-color: rgba(242, 242, 242);
  line-height: 50px;
}
p {
  margin: 0 0 0 20px;
}
.input_1 {
  width: 350px;
}
.input_2 {
  width: 280px;
}
.nav_mid {
  padding: 60px 0 0 30px;
}
.el-input:first-of-type {
  margin-left: 20px;
}
.el-input:nth-of-type(2) {
  margin-left: 50px;
}
.el-date-editor {
  width: 350px;
  margin-left: 20px;
}
.el-select {
  width: 280px;
  margin-left: 50px;
}
.search {
  margin-left: 20px;
  width: 80px;
  height: 40px;
}
.nav_bottom {
  height: 50px;
  background-color: rgba(242, 242, 242);
  line-height: 50px;
  margin: 15px 0 15px 0;
}
.ziti {
  float: left;
}
.export {
  width: 80px;
  float: right;
  margin-right: 35px;
  margin-top: 5px;
  height: 40px;
}
.block {
  text-align: center;
  margin-top: 50px;
}

.el-date-editor /deep/ .el-range-separator {
  padding: 0;
}
</style>
